<template>
	<view class="askHelp">
		<van-cell-group>
			<van-cell
			 class="allBackground"
				label="基本信息"
				label-class="title"
				readonly
			/>
		  <van-field
				label="姓名"
				clearable
				required
		    placeholder="请输入姓名"
				@input="setInputValue('name', $event)"
		  />
			<van-field
				label="手机号码"
				clearable
				required
				type='number'
				maxlength="11"
			  placeholder="请输入手机号码"
				@input="setInputValue('phone', $event)"
			/>
			<van-field
				label="性别"
				clearable
				required
				readonly
			  placeholder="请选择性别"
			  :value="dataValue.sex"
				@click.native="showPop('sexList', 'name')"
			/>
			<van-field
				label="居住城市"
				clearable
				required
				readonly
			  placeholder="请选择居住地址"
			  :value="dataValue.address"
				@click.native="showPop('areaList', 'areaList', 'area')"
			/>
		</van-cell-group>
		
		<van-cell-group>
			<van-cell
				class="allBackground"
				label="病情"
				label-class="title"
				readonly
			/>
			<van-field
				label="疾病类型"
				clearable
				readonly
				required
			  placeholder="请选择疾病类型"
			  :value="dataValue.diseaseName"
				@click.native="showPop('diseaseList', 'name')"
			/>
			<van-field
				label="出现时间"
				clearable
				readonly
				required
				placeholder="请选择出现时间"
				:value="dataValue.startDate"
				@click.native="showPop('startDate', 'time', 'timePicker')"
			/>
			<van-field
				:value="dataValue.details"
				title-width="600rpx"
				label="详细情况(患病过程、治疗经历、目前状况)"
				required
				type="textarea"
				placeholder="请详细描述，以便了解情况"
				autosize
				@input="blur('details', $event)"
			/>
			<van-field
				clearable
				readonly
				class="upLoad"
			>
				<template slot="button" class="upLoadOn">
					<view class="upLoadTitle">附件(相关照片、检查、医院诊断书)</view>
					<van-uploader name="addFiles" :file-list="upLoad.addFiles" :after-read="afterRead" @delete="deleteFile">
						<van-button>
							<van-icon name="plus" style="color:#47A49B;" />
						</van-button>
					</van-uploader>
				</template>
			</van-field>
		</van-cell-group>
		
		<van-popup :show="showPicker" position="bottom">
			<van-picker
				v-if="pickerType === 'picker'"
				show-toolbar
				:value-key="valueType"
				:columns="columnList"
				@confirm="onConfirm"
				@cancel="showPicker = false"
			/>
			<van-datetime-picker
				v-if="pickerType === 'timePicker'"
				type="date"
				title="选择年月日"
				:value="new Date().getTime()"
				@confirm="onConfirm"
				@cancel="showPicker = false"
			/>
			<van-area
				v-if="pickerType === 'area'"
			  :area-list="areaList"
			  :columns-placeholder=" ['请选择', '请选择', '请选择'] "
			  title="省市区"
				@confirm="onConfirm"
				@cancel="showPicker = false"
			/>
		</van-popup>
		<view class="btnBox">
			<van-button class="btn" type="default" @click="submit">寻求帮助</van-button>
		</view>
		<van-toast id='van-toast'/>
	</view>
</template>

<script>
	import {areaList}  from '@/utils/city';
	import { FormatTime } from "@/utils/index";
	import { formValidation } from '@/utils/regexp'
	import { uploadFile } from '@/utils/uploadFile'
	import { deleteFile } from '@/api/common'
	import { askHelpAdd } from '@/api/addEdit'
	let upLoad = {
		addFiles: []
	}
	export default {
		name: 'askHelp',
		data() {
			return {
				chooseType: '', // 当前选择的值
				pickerType: 'picker', // 当前选择的类型
				valueType: '',
				columnList: [], //当前选中的列表数据
				areaList: areaList, //省市区数据
				showPicker: false,
				dataValue: {},
				// 必填
				rules:{
					name: [
						{ required: true, message: '请填写姓名' }
					],
					phone:[
						{ required: true, message:'请填写手机号' },
						{ validate: /^1\d{10}$/, message:'手机号不正确' }
					],
					sex:[
						{ required: true, message:'请选择性别' }
					],
					address: [
						{ required: true, message:'请选择居住地址' }
					],
					diseaseName: [
						{ required: true, message:'请选择疾病类型' }
					],
					startDate: [
						{ required: true, message:'请选择出现时间' }
					],
					details: [
						{ required: true, message:'请填写详细描述' }
					]
				},
				//附件总集
				upLoad: upLoad,
				sexList: [
					{
						id: '1',
						name: '男'
					},
					{
						id: '2',
						name: '女'
					},
					{
						id: '0',
						name: '保密'
					}
				]
			}
		},
		computed: {
			// 疾病类型
			diseaseList() {
				return this.$storage.getItem('diseaseList')
			}
		},
		onShow() {},
		methods: {
			blur(e,s) {
				this.dataValue[e] = s.detail;
			},
			setInputValue(e,s){
				this.dataValue[e] = s.detail;
			},
			showPop(val, valueType , type='picker') {
				this.showPicker = true;
				this.columnList = this[val];
				this.chooseType = val;
				this.pickerType = type
				this.valueType = valueType
			},
			onConfirm(e) {
				const val = e.detail.value
				const vals = e.detail.values
				switch (this.chooseType) {
					case 'sexList':
						this.dataValue.sex = val.name
						this.dataValue.gender = val.id
						break;
					case 'areaList':
						let name = "";
						let id = "";
						vals.forEach(item => {
							if (name) {
								name += '-' + item.name
								id += ',' + item.code
							} else {
								name = item.name
								id = item.code
							}
						})
						this.dataValue.address = name
						this.dataValue.areaCode = id
						break;
					case 'diseaseList':
						this.dataValue.diseaseName = val.name
						this.dataValue.diseaseId = val.id
						this.dataValue.imgTheme = val.imgTheme
						break;
					case 'startDate':
						this.dataValue.startDate = FormatTime(new Date(e.detail), "YYYY-MM-DD")
						break;
					default:
						break;
				}
				this.showPicker = false;
			},
			afterRead:(file,val) => {
				let that = this;
				let type = val.name;
				 uploadFile({
					fileURL:'/file/uploadImage',
					filePath: file.path
				 }).then(res => {
					 upLoad[type].push({ url:res.file.accessUrl,id:res.file.fileId })
				 })
			},
			deleteFile(e) {
				let obj = this.upLoad[e.detail.name][e.detail.index]
				this.upLoad[e.detail.name].splice([e.detail.index],1)
				this.$nextTick(() =>{
					deleteFile({ fileId: obj.id })
				})
			},
			submit() {
				formValidation({
					data: this.dataValue,
					rules: this.rules
				}).then(res=>{
					if (this.upLoad.addFiles) {
						this.dataValue.addFiles = [];
						this.upLoad.addFiles.map(item => {
							this.dataValue.addFiles.push(item.id)
						})
						askHelpAdd(this.dataValue).then(res => {
							uni.showToast({
								title: res.message,
								duration: 2000,
								icon: 'success'
							})
							setTimeout(() => {
								upLoad = {
									addFiles: []
								};
								this.upLoad = {
									addFiles: []
								};
								uni.navigateBack()
							},1000)
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.askHelp {
		padding-bottom: 120rpx;
		position: relative;
		.btnBox {
			font-size: 24rpx;
			position: fixed;
			left: 0;
			bottom: 0;
			box-sizing: border-box;
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background-color: #FFFFFF;
			z-index: 2;
			.btn {
				width: 100%;
				height: 100rpx;
				user-select: none;
				/deep/ .van-button {
					width: 100%;
					height: 100%;
					background-color: #549FB6;
					color: #FFFFFF;
				}
			}
		}
	}
 /deep/ .van-cell__label {
	font-size: 40rpx;
	font-weight: bold;
	color: #000;
}
.upLoad /deep/ .van-field__input {
	display: none;
}
/deep/ .van-field__button {
	padding-left: 0;
}
.upLoadOn {
	text-align: left;
	.placeHolder {
		font-size: 26rpx;
	}
	.upLoadTitle {
		color: #000;
		margin-top: 60rpx;
	}
	/deep/ .van-button--normal {
		padding: 90rpx 80rpx;
	}
}
</style>
